<template>
    <div>
        <el-container class="is-vertical">
<!--            <BaHeader /> :style="calcHeight()"-->
            <el-scrollbar  class="main-scrollbar" ref="mainScrollbarRef">
                <el-main class="layout-main">
                    <slot />
                </el-main>
<!--                <BaFooter />-->
            </el-scrollbar>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import type { ScrollbarInstance } from 'element-plus'

const mainScrollbarRef = ref<ScrollbarInstance>()

provide('mainScrollbarRef', mainScrollbarRef)
</script>

<style scoped lang="scss">
.user-layouts {
    display: flex;
    padding-top: 15px;
    align-items: flex-start;
}
.layout-main {
    padding: 0 !important;
    overflow-x: hidden;
}
</style>
